<template>
    <view :style="{ '--color': color, '--back-color': $common.hexToRgba(color, 0.8) }">
        <view class="listTwo" v-for="(item, index) in pageData" :key="item.id">
            <image :src="$imgUrls(item.member.v_headimg)" mode="aspectFill" class="headImg"></image>
            <view class="content">
                <text class="name">{{ item.member.v_name }}</text>
                <view class="title ellipsis_2" v-if="item.demand">{{ item.demand }}</view>
                <text class="color_99 size26 m-top10">{{ item.add_time }}</text>
                <view class="Goods">
                    <image :src="$imgUrls(item.goods.img)" @click="$common.previewSingle(item.goods.img)" mode="aspectFill" class="goodsImg"></image>
                    <view class="goodsbox">
                        <view class="ellipsis godsname">{{ item.goods.name }}</view>
                        <view class="d-flex a-center">
                            <view class="d-flex a-center color_ff4 bold" v-if="item.price">
                                <text class="size26 m-top6">￥</text>
                                <text class="size38">{{ item.price }}</text>
                            </view>
                            <!--  <view class="d-flex a-center color_99 m-left20" v-if="item.num">
                                <text class="size24">需求：</text>
                                <text class="size26">{{ item.num }}</text>
                            </view> -->
                        </view>
                    </view>
                </view>
                <view class="row j-sb a-center m-top10">
                    <view class="d-flex a-center color_33" v-if="item.num">
                        <text class="size32">需求量:</text>
                        <text class="size34 bold">{{ item.num }}</text>
                    </view>
                    <view class="rob" @click="robBtn(item.id)">抢单</view>
                </view>
            </view>
        </view>
        <emptys v-if="!pageData.length"></emptys>
        <showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        props: ['pageData'],
        data() {
            return {
                showModal: false
            };
        },
        methods: {
            robBtn(snatch_id) {
                if (!this.vid) return (this.showModal = true);
                this.$showLoading('');
                this.$http
                    .post({
                        url: '/SnatchApi/snatchOrder',
                        data: {
                            snatch_id
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 200) return this.$Toast(res.msg);
                        this.$Modals('提示', res.msg);
                        const Index = this.pageData.findIndex((n) => n.id == snatch_id);
                        this.pageData.splice(Index, 1);
                    });
            }
        },
        computed: {
            ...mapState(['color', 'vid', 'totalHeight'])
        }
    };
</script>

<style lang="scss" scoped>
    .listTwo {
        width: 710rpx;
        background-color: #fff;
        padding: 20rpx;
        margin: 20rpx auto 0;
        border-radius: 10rpx;
        display: flex;
        .headImg {
            width: 88rpx;
            height: 88rpx;
            border-radius: 50%;
            margin-right: 20rpx;
        }
        .content {
            flex: 1;
            display: flex;
            flex-direction: column;
            .name {
                color: #000;
                font-size: 28rpx;
            }
            .title {
                color: #333;
                font-size: 30rpx;

                margin-top: 20rpx;
            }
            .Goods {
                width: 100%;
                display: flex;
                align-items: center;
                margin-top: 20rpx;
                .goodsImg {
                    width: 120rpx;
                    height: 120rpx;
                    border-radius: 6rpx;
                    margin-right: 20rpx;
                }
                .goodsbox {
                    flex: 1;
                    height: 120rpx;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .godsname {
                        color: #000;
                        font-size: 30rpx;
                        font-weight: 500;
                    }
                }
            }
            .rob {
                width: 200rpx;
                height: 80rpx;
                background-color: var(--color);
                color: #fff;
                font-size: 32rpx;
                // letter-spacing: 10rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 10rpx;
            }
        }
    }
</style>
